<template>
    <div class="box-column">
        <ux-header-search ref="searchHeader" v-bind="enquiryData" :btnsData="{ permissionsData }"
            @search="onQueryClick"></ux-header-search>
        <div class="box-flex1 table">
            <vxe-grid v-bind="tableConfig" :data="dataStore.data" :columns="table.columns">
                <template v-slot:operate="{ row }">
                    <ux-btn-group :btns="table.btns" :data="{ row, permissionsData }"></ux-btn-group>
                </template>
            </vxe-grid>
        </div>
        <div class="pagination-el box-row box-center-end">
            <el-pagination @size-change="onSizeChange" @current-change="onCurrentChange"
                :current-page="dataStore.proxy.page" :page-size="dataStore.proxy.pageSize" :page-sizes="dataStore.pageSizes"
                :total="dataStore.pagination.total" :layout="'total, sizes, prev, pager, next, jumper'"></el-pagination>
        </div>
        <dialogForm ref="dialogForm" :data="data" @submitSuccess="onSubmitSuccess" @closeDialog="onCloseDialog">
        </dialogForm>
    </div>
</template>

<script  lang="ts">
import { Component, Vue } from "vue-property-decorator";
import { Action, Getter } from "vuex-class";
import { mixinTableStore } from "@/mixin/table/Store";
import { mixinTableHeader } from "@/mixin/table/Header";
import { mixinTableOperation } from "@/mixin/table/Operation";
import { mixinDialogFormParent } from "@/mixin/dialog/FormParent";
import { mixinAccess } from '@/mixin/Access';
import { tenantMixin } from "../../Mixin";
import dialogForm from "./Edit.vue";
import { getListByConfig } from '@/utils';
@Component({
    mixins: [
        mixinTableStore,
        mixinTableHeader,
        mixinTableOperation,
        mixinDialogFormParent,
        mixinAccess,
        tenantMixin
    ],
    components: {
        dialogForm
    }
})
export default class parkTenantRoomTable extends Vue {
    @Action("parkTenantRoom/del") itemDel: any;
    @Action("parkTenantRoom/list") getList: any;

    @Getter("sharing/tenantIdentity") typeData: any;

    deleteDialog: any = {
        name: "确定移除吗？",
        comfirm: "移除"
    };


    table: any = {
        btns: [
            {
                label: "移除",
                condition: ['permissionsData.houseDelete'],
                handleClick: (this as any).onDelClick
            },
            {
                label: "编辑",
                condition: ['permissionsData.houseEdit'],
                handleClick: (this as any).onEditClick
            }
        ],
        // 列配置
        columns: [
            {
                width: 70,
                type: "seq",
                title: "序号"
            },
            {
                title: "楼栋名称",
                field: "build_name"
            },
            {
                title: "楼层名称",
                field: "floor_name"
            },
            {
                title: "房间名称",
                field: "room_name"
                // ,formatter: function ({ cellValue, row }: any) {
                //  return `${row.build_name}-${row.floor_name}-${cellValue}`;
                // }
            },
            {
                title: "居住身份",
                field: "residence_identity",
                params: "typeData",
                formatter: (this as any).formatterData
            },
            {
                title: "入住时间",
                field: "created_at"
            },
            {
                title: "备注",
                field: "remark"
            },
            {
                slots: { default: "operate" },
                title: "操作",
                fixed: 'right',
                field: "operate",
                width: 140
            }
        ]
    };
    @Action('parkBuilding/all') getBuilding: any;
    @Getter('parkBuilding/all') buildingData: any;
    // 查询头下拉数据配置
    headerSelectList: any = [
        {
            isCascader: true,
            dataName: 'buildingData',
            keyName: 'room',
            funNmae: 'getBuilding'
        },
        {
            dataName: "typeData",
            keyName: "residence_identity"
        }
    ];

    // 查询头配置
    enquiryData: any = {
        fields: [
            {
                fieldType: "select",
                field: "residence_identity",
                label: "居住身份"
            },
            {
                fieldType: 'cascader',
                field: 'room',
                label: '住址',
                props: {
                    checkStrictly: true,
                    value: 'value',
                    label: 'label',
                    lazy: true,
                    lazyLoad: this.lazyLoad
                }
            }
        ],
        btns: [
            {
                label: "添加",
                class: "btn-blue",
                icon: "el-icon-plus",
                condition: ["permissionsData.addUser"],
                handleClick: (this as any).onAddClick
            }
        ],
        valueTransform: [
            {
                field: 'room',
                fields: ['build_sn', 'floor_sn', 'room_sn']
            }
        ]
    };
    @Action('parkRoom/all') getRoom: any;
    @Action('parkFloor/all') getFloor: any;
    lazyLoad(node: any, resolve: any) {
        const { level, data } = node;
        // 如果是
        if (level == 0) {
            resolve();
        } else {
            let fun = this.getFloor,
                params: any = { build_sn: data.value },
                config: any = {
                    value: 'floor_sn',
                    label: 'floor_name'
                };
            if (level == 2) {
                fun = this.getRoom;
                params = { floor_sn: data.value };
                config = {
                    value: 'room_sn',
                    label: 'room_name'
                };
            }
            fun(params).then(({ data }: any) => {
                // 通过调用resolve将子节点数据返回，通知组件数据加载完成
                resolve(
                    getListByConfig(data, config, {
                        appendsData: {
                            leaf: level >= 2
                        }
                    })
                );
            });
        }
    }
}
</script>
